<template>
    <childComponent />
</template>

<script setup lang="jsx">
import { reactive } from "vue";

const list = reactive([
    {
        rank: 1,
        name: '吕布',
        factions: '群雄'
    },
    {
        rank: 2,
        name: '关羽',
        factions: '蜀汉'
    },
    {
        rank: 3,
        name: '张飞',
        factions: '蜀汉'
    },
    {
        rank: 4,
        name: '赵云',
        factions: '蜀汉'
    },
    {
        rank: 5,
        name: '马超',
        factions: '蜀汉'
    }
])

const childComponent = () => {
    return (
        <>
            <h1>三国武将排行自以为是版</h1>
            { list.map(v => <div>第{v.rank}名：{v.name}，他所在的阵营是{v.factions}</div>) }
        </>
    )
}
</script>
